<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Test</title>
    <!-- <style media="screen">
      html a{
        color: blue;
        cursor: pointer;
        margin: 20px 10px;
      }
    </style> -->
  </head>
  <body>
    <article id="app">
    </article>















      <!-- <a class="api a">a.html</a>
      <a class="api b">b.html</a>
      <script type="text/javascript">
        //注册路由
        document.querySelectorAll('.api').forEach(item => {
          item.addEventListener('click', (e) => {
            e.preventDefault && e.preventDefault();
            let link = item.textContent;//获取指定节点的文本内容
            window.history.pushState({ name: 'api' }, link, link);
          }, false)
        });
        window.addEventListener('popstate', (e) => {
          console.log({
            location: location.href,
            state: e.state
          });
        }, false)
      </script>
     <h3>Hash</h3>
     <a class="hash c">c.html</a>
     <a class="hash d">d.html</a>
     <script type="text/javascript">
        //注册路由
        document.querySelectorAll('.hash').forEach(item => {
          item.addEventListener('click', (e) => {
            e.preventDefault && e.preventDefault();
            let link = item.textContent;
            location.hash = link;
          }, false)
        });
        window.addEventListener('hashchange', (e) => {
          console.log({
            location: location.href,
           hash:location.hash
          });
        }, false)
      </script> -->

  </body>
</html>
